import { render } from 'react-dom';
import React, { Component } from 'react';
import { MuiThemeProvider, createMuiTheme } from 'material-ui/styles';
import createPalette from 'material-ui/styles/palette';
import { BrowserRouter as Router } from 'react-router-dom';
import { loadComponents } from 'loadable-components';
import { Provider } from 'react-redux';
import { combineReducers, createStore, compose, applyMiddleware } from 'redux';
import { ConnectedRouter, routerReducer, routerMiddleware } from 'react-router-redux';
import createHistory from 'history/createBrowserHistory';
import createSagaMiddleware from 'redux-saga';

import App from '../app/routes/app';
import gistReducers from '../app/routes/home/reducer'; // 修改路径
import sagas from '../app/sagas';

// Grab the state from a global variable injected into the server-generated HTML
// 服务端传递过来的数据
const preloadedState = window.__PRELOADED_STATE__;

// 组合reducers
const reducer = combineReducers({
  gists: gistReducers,
  routing: routerReducer,
});

const history = createHistory();
const sagaMiddleware = createSagaMiddleware();
// Allow the passed state to be garbage-collected
delete window.__PRELOADED_STATE__;

const store = createStore(
  reducer,
  preloadedState,
  compose(
    applyMiddleware(routerMiddleware(history), sagaMiddleware),
    window.devToolsExtension ? window.devToolsExtension() : f => f,
  ),
);

// then run the saga
sagaMiddleware.run(sagas);

const createStyleManager = () => MuiThemeProvider.createDefaultContext({
  theme: createMuiTheme({
    palette: createPalette({
      type: 'light',
    }),
  }),
});

class Main extends Component {
  // Remove the server-side injected CSS.
  componentDidMount() {
    // const jssStyles = document.getElementById('jss-server-side');
    // if (jssStyles && jssStyles.parentNode) {
    //   jssStyles.parentNode.removeChild(jssStyles);
    // }
  }

  render() {
    return (
      <Router>
        <App {...this.props} />
      </Router>
    );
  }
}

loadComponents().then(() => {
  render(
    <Provider store={store}>
      <ConnectedRouter history={history}>
        <Main />
      </ConnectedRouter >
    </Provider>,
    document.getElementById('root'),
  );
});
